<template>
  <div>
    <section class="sec">
      <div class="titleimg">
        <div class="title">
          它总是在夕阳中等你<br />
          当你累了的时候
        </div>
      </div>
    </section>
    <section class="sec">
      <div class="img-tag">
        <a href="">
          <div class="part1 pt" @click="toDisplay(1)">
            <div class="imghid">
              <div class="img"></div>
            </div>
            <div class="txt">
              <h1>CATS</h1>
            </div>
          </div>
        </a>
        <a href="">
          <div class="part2 pt" @click="toDisplay(2)">
            <div class="txt">
              <h1>DOGS</h1>
            </div>
            <div class="imghid">
              <div class="img"></div>
            </div>
          </div>
        </a>
        <a href="">
          <div class="part3 pt" @click="toDisplay(3)">
            <div class="imghid">
              <div class="img"></div>
            </div>
            <div class="txt">
              <h1>BIRDS</h1>
            </div>
          </div>
        </a>
        <a href="">
          <div class="part4 pt" @click="toDisplay(4)">
            <div class="txt">
              <h1>FISH</h1>
            </div>
            <div class="imghid">
              <div class="img"></div>
            </div>
          </div>
        </a>
      </div>
    </section>
    <div class="mid">
      <ul id="banner" class="banner"></ul>
    </div>
  </div>
</template>

<script>
import $ from "jquery";

export default {
  name: "Main",
  components: {},
  methods: {
    toDisplay(e) {
      let categoryId = "";
      switch (e) {
        case 1:
          categoryId = "CATS";
          break;
        case 2:
          categoryId = "DOGS";
          break;
        case 3:
          categoryId = "BIRDS";
          break;
        case 4:
          categoryId = "FISH";
          break;
        default:
          break;
      }

      this.$router.push({
        name: "Display",
        params: {
          category: categoryId,
        },
      });
    },
  },
};
</script>

<style scoped>
@charset "utf-8";

.titleimg {
  background-image: url("../assets/head.jpg");
  height: 100vh;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  width: 100vw;
  transition: 0.5s ease 0s;
  animation: load 0.5s;
}

.titleimg .title {
  width: 1500px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
  font-size: 100px;
  font-weight: bolder;
  font-family: NSimSun;
  /* -webkit-text-stroke: 0.05px rgba(133, 194, 244, 0.9);s */
  color: rgba(54, 158, 243, 0.9);
}
.img-tag {
  width: 1500px;
  height: 500px;
  position: absolute;
  top: 50%;
  margin-top: 400px;
  left: 50%;
  margin-left: -750px;
}

.sec {
  height: 100vh;
  width: 100vw;
  scroll-snap-align: start;
}

.pt {
  display: flex;
  flex-direction: column;
  height: 500px;
  width: 250px;
  float: left;
  margin: 150px 0px 0px 105px;
  background: rgba(219, 235, 241, 0.8);
  box-shadow: 0 0 15px rgb(59, 73, 95);
  border-radius: 15px;
  overflow: hidden;
  scroll-snap-align: start;
  transition: all 0.5s ease 0s;
}

.pt:hover {
  cursor: pointer;
  transform: scale(1.05);
}

.imghid {
  overflow: hidden;
}

.part1 .img {
  background-image: url("../assets/catalog-cat.jpg");
}

.part2 .img {
  background-image: url("../assets/catalog-dog.jpg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.part3 .img {
  background-image: url("../assets/catalog-bird.jpg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.part4 .img {
  background-image: url("../assets/catalog-fish.jpg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.pt .img {
  height: 140px;
  width: 250px;
  background-size: cover;
  transition: all 0.5s ease 0s;
  opacity: 0.8;
}

.pt .img:hover {
  transform: scale(1.1);
}

.pt .txt {
  height: 310px;
  width: 200px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  margin: auto;
}

.pt .txt h1 {
  text-align: center;
  font-size: 3em;
  color: rgb(28, 44, 68);
  height: 30px;
  line-height: 30px;
}

.pt .txt p {
  margin-top: -2px;
  word-wrap: break-word;
  color: rgb(114, 182, 202);
}

@keyframes load {
  0% {
    background-position-y: 50px;
    opacity: 0;
  }

  100% {
    background-position-y: 0px;
    opacity: 1;
  }
}
</style>
